<template>
    <City-Header></City-Header>
    <City-Search :cities="cities"></City-Search>
    <City-List 
    :cities="cities" 
    :hotCities="hotCities"
    :letter="letter"></City-List>
    <City-Alphabet 
    :cities="cities"
    @change="handleLetterChange"></City-Alphabet>
</template>

<script>
import axios from 'axios';
import CityHeader from './components/CityHeader.vue';
import CitySearch from './components/CitySearch.vue';
import CityList from './components/CityList.vue';
import CityAlphabet from './components/CityAlphabet.vue';



export default {
    name: 'City',
    components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data() {
        return {
            cities: [],
            hotCities: [],
            letter: ''
        }
        
    },
    methods: {
        getCityInfo () {
            axios.get('/dist/mock/city.json').then(this.handleGetCityInfoSucc)
        },
        handleGetCityInfoSucc (res) {
            res =res.data;
            if( res.ret && res.data ){
                const data=res.data
                this.cities=data.cities
                this.hotCities=data.hotCities
            }
        },
        handleLetterChange(letter) {
            this.letter=letter
        }

    },
    mounted () {
        this.getCityInfo()
    }

}
</script>

<style>

</style>